<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="/shop/css/style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="/js/plugins/dialog/dialog.css"/>
    <script type="text/javascript" src="/shop/js/jquery.min.js"></script>
    <script type="text/javascript" src="/shop/js/tab.js"></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>

    <script>
        // 页面加载完毕发送请求查询所有订单--不同状态下的订单
        $(function () {
            // 获取用户信息
            var user = JSON.parse(sessionStorage.getItem("user"));
            setTimeout(function () {
                // 查询所有的待发货状态的订单(已付款)
                $.get("/orders/" + user.id + "/orders", {status: 2}, function (data) {
                    $("#payOrder").renderValues({list: data}, {
                        repay: function (ele, value) {
                            ele.href = "/mine/detail.html?id=" + value;
                        }
                    });
                });
            },200);

            setTimeout(function () {
                // 发送请求查询所有待付款的商品
                $.get("/orders/" + user.id + "/orders", {status: 1}, function (data) {
                    if (data.length == 0) {
                        $("#waitPay").detach();
                    } else {
                        $("#waitPay").renderValues({list: data}, {
                            handle: function (ele, value) {
                                ele.href = "/mine/zhifu.html?id=" + value;
                            }
                        });
                    }
                });

            }, 600);


            setTimeout(function () {
                // 发送请求查询所有取消的订单
                $.get("/orders/" + user.id + "/orders", {status: 5}, function (data) {
                    if (data.length == 0) {
                        $("#cancelOrder").detach();
                    } else {
                        $("#cancelOrder").renderValues({list: data}, {
                            repay: function (ele, value) {
                                ele.href = "/mine/detail.html?id=" + value;
                            }
                        });
                    }
                });

            }, 400);

            // 发送请求查询所有已收货的订单
            $.get("/orders/" + user.id + "/orders", {status: 4}, function (data) {
                if (data.length == 0) {
                    $("#receiveOrder").detach();
                    $("#successOrder").detach();
                } else {
                    $("#receiveOrder").renderValues({list: data}, {
                        repay: function (ele, value) {
                            ele.href = "/mine/detail.html?id=" + value;
                        }
                    });
                    $("#successOrder").renderValues({list: data}, {
                        repay: function (ele, value) {
                            ele.href = "/mine/detail.html?id=" + value;
                        }
                    });
                }
            });
        });
    </script>
</head>
<body>

<section class="aui-flexView">
    <header class="aui-navBar aui-navBar-fixed">
        <a href="javascript:history.go(-1)" class="aui-navBar-item">
            <i class="icon icon-return"></i>
        </a>
        <div class="aui-center">
            <span class="aui-center-title">我的订单</span>
        </div>
        <a href="javascript:;" class="aui-navBar-item">
            <i class="icon icon-sys"></i>
        </a>
    </header>
    <section class="aui-scrollView">
        <div class="aui-tab" data-ydui-tab>
            <ul class="tab-nav">
                <li class="tab-nav-item tab-active">
                    <a href="javascript:;">全部</a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">待付款</a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">待收货</a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">已完成</a>
                </li>
                <li class="tab-nav-item">
                    <a href="javascript:;">已取消</a>
                </li>
            </ul>
            <div class="divHeight"></div>
            <div class="tab-panel">
                <!--全部-->
                <div id="receiveOrder">
                    <div class="tab-panel-item tab-active" render-loop="list">
                        <div class="tab-item">
                            <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                                <div class="aui-well-item-hd">
                                    <img src="/shop/images/icom-log.jpg" alt="">
                                </div>
                                <div class="aui-well-item-bd">
                                    <h3>骡窝窝官方商城</h3>
                                </div>
                                <span class="aui-well-item-fr"></span>
                            </a>
                            <div class="aui-mail-product">
                                <a href="javascript:;" class="aui-mail-product-item">
                                    <div class="aui-mail-product-item-hd">
                                        <img src="" alt="" render-src="list.coverUrl">
                                    </div>
                                    <div class="aui-mail-product-item-bd">
                                        <p render-html="list.productName"></p>
                                    </div>
                                </a>
                            </div>
                            <a href="javascript:;" class="aui-mail-payment">
                                <p>
                                    共<em>1</em>
                                    件商品 实付积分: ￥<i render-html="list.points"></i>
                                </p>
                            </a>
                            <div class="aui-mail-button">
                                <a href="" render-key="list.productId" render-fun="repay" class="aui-df-color">再次购买</a>
                                <a href="javascript:;" class="aui-df-color">评价晒单</a>
                                <a href="javascript:;" class="aui-df-color">查看发票</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--待付款-->
                <div id="waitPay">
                    <div class="tab-panel-item" render-loop="list">
                        <div class="tab-item">
                            <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                                <div class="aui-well-item-hd">
                                    <img src="/shop/images/icom-log.jpg" alt="">
                                </div>
                                <div class="aui-well-item-bd">
                                    <h3>骡窝窝官方商城</h3>
                                </div>
                                <span class="aui-well-wait">等待兑换</span>
                            </a>
                            <div class="aui-mail-product">
                                <a href="javascript:;" class="aui-mail-product-item">
                                    <div class="aui-mail-product-item-hd">
                                        <img src="" alt="" render-src="list.coverUrl">
                                    </div>
                                    <div class="aui-mail-product-item-bd">
                                        <p render-html="list.productName"></p>
                                    </div>
                                </a>
                            </div>
                            <a href="javascript:;" class="aui-mail-payment">
                                <p>
                                    共<em>1</em>
                                    件商品 实付积分: ￥<i render-html="list.points"></i>
                                </p>
                            </a>
                            <div class="aui-mail-button">
                                <a href="" render-key="list.id" render-fun="handle">去支付</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--待收货-->
                <div class="tab-panel-item" id="payOrder">
                    <div render-loop="list">
                        <div class="tab-item">
                            <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                                <div class="aui-well-item-hd">
                                    <img src="/shop/images/icom-log.jpg" alt="">
                                </div>
                                <div class="aui-well-item-bd">
                                    <h3>骡窝窝官方商城</h3>
                                </div>
                                <span class="aui-well-wait">等待收货</span>
                            </a>
                            <div class="aui-mail-product">
                                <a href="javascript:;" class="aui-mail-product-item">
                                    <div class="aui-mail-product-item-hd">
                                        <img src="" render-src="list.coverUrl" alt="">
                                    </div>
                                    <div class="aui-mail-product-item-bd">
                                        <p render-html="list.productName"></p>
                                    </div>
                                </a>
                            </div>
                            <a href="javascript:;" class="aui-mail-payment">
                                <p>
                                    共<em>1</em>
                                    件商品 实付积分: <i render-html="list.points"></i>
                                </p>
                            </a>
                            <div class="aui-mail-button">
                                <a href="javascript:;">等待收货</a>
                                <a href="" render-key="list.productId" render-fun="repay" class="aui-df-color">再次购买</a>
                                <a href="javascript:;" class="aui-df-color">查看物流</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--已完成-->
                <div id="successOrder">
                    <div class="tab-panel-item" render-loop="list">
                        <div class="tab-item">
                            <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                                <div class="aui-well-item-hd">
                                    <img src="/shop/images/icom-log.jpg" alt="">
                                </div>
                                <div class="aui-well-item-bd">
                                    <h3>骡窝窝官方商城</h3>
                                </div>
                                <span class="aui-well-item-fr"></span>
                            </a>
                            <div class="aui-mail-product">
                                <a href="javascript:;" class="aui-mail-product-item">
                                    <div class="aui-mail-product-item-hd">
                                        <img src="" alt="" render-src="list.coverUrl">
                                    </div>
                                    <div class="aui-mail-product-item-bd">
                                        <p render-html="list.productName"></p>
                                    </div>
                                </a>
                            </div>
                            <a href="javascript:;" class="aui-mail-payment">
                                <p>
                                    共<em>1</em>
                                    件商品 实付积分: ￥<i render-html="list.points"></i>
                                </p>
                            </a>
                            <div class="aui-mail-button">
                                <a href="" render-key="list.productId" render-fun="repay" class="aui-df-color">再次购买</a>
                                <a href="javascript:;" class="aui-df-color">评价晒单</a>
                                <a href="javascript:;" class="aui-df-color">查看发票</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--已取消-->
                <div id="cancelOrder">
                    <div class="tab-panel-item" render-loop="list">
                        <div class="tab-item">
                            <a href="javascript:void(0);" class="aui-well-item aui-well-item-clear">
                                <div class="aui-well-item-hd">
                                    <img src="/shop/images/icom-log.jpg" alt="">
                                </div>
                                <div class="aui-well-item-bd">
                                    <h3>骡窝窝官方商城</h3>
                                </div>
                                <span class="aui-well-item-fr">已取消</span>
                            </a>
                            <div class="aui-mail-product">
                                <a href="javascript:;" class="aui-mail-product-item">
                                    <div class="aui-mail-product-item-hd">
                                        <img src="" render-src="list.coverUrl" alt="">
                                    </div>
                                    <div class="aui-mail-product-item-bd">
                                        <p render-html="list.productName"></p>
                                    </div>
                                </a>
                            </div>
                            <a href="javascript:;" class="aui-mail-payment">
                                <p>
                                    共<em>1</em>
                                    件商品 实付积分: ￥<i render-html="list.points"></i>
                                </p>
                            </a>
                            <div class="aui-mail-button">
                                <a href="" render-key="list.productId" render-fun="repay" class="aui-df-color">再次购买</a>
                                <a href="javascript:;" class="aui-df-color">评价晒单</a>
                                <a href="javascript:;" class="aui-df-color">查看发票</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
</body>
</html>
